<template>
  <el-card class="me-area" :body-style="{ padding: '14px' }">
    <div class="me-article-header">
      <div v-if="isRead === 1">
        <a @click="readMsg(id, type, extendParams)" class="me-article-title" style="color: #a6a6a6;">{{content}}</a>
      </div>
      <div v-else>
        <a @click="readMsg(id, type, extendParams)" class="me-article-title">{{content}}</a>
      </div>
      </div>
    <div class="me-artile-description">
      <div v-if="type === 1">
        分享消息
      </div>
      <div v-else-if="type === 2">
        好友申请消息
      </div>
      <div v-else>
        同意申请消息
      </div>
      <span class="me-pull-right me-article-count">
	    	<i class="el-icon-time"></i>&nbsp;{{createTime | format}}
	    </span>
    </div>
  </el-card>
</template>

<script>
import {getToken} from '@/request/token'
import {readMessage} from '@/api/news'

  export default {
    name: 'NewsItem',
    props: {
      id: String,
      title: String,
      type: Number,
      content: String,
      createTime: String,
      isRead: Number,
      extendParams: Object
    },
    data() {
      return {}
    },
    methods: {
      //查看消息
      readMsg(id, type, extendParams) {
        //先将长整型转换为字符串
        let json =extendParams.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2')
        // 解析JSON字符串，构造由字符串描述的JavaScript值或对象
        const ex = JSON.parse(json);
        if (getToken()) {
          let that = this
          // 获取用户收到的信息
          readMessage(id).then((data) => {
            if(data.success){
              // 判断消息为分享文章
              if (type === 1) {
                this.$router.push({path: `/view/${ex.id}`})
              }else {
                // 如果是好友申请使用$router.go(0)刷新页面闪白
                this.$router.go(0)
              }
            }else{
              // 没有获取到成功信息
              that.$message({message: error, type: '查看失败:'+data.msg, showClose: true});
            }
          }).catch((error) => {
            if (error !== 'error') {
              that.$message({message: error, type: 'error', showClose: true});
            }
          })
        } else {
          // 没有获取到token判定为未登录
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请先登录哦'
          })
        }
      }
    }
  }
</script>

<style scoped>

  .me-article-header {
    /*padding: 10px 18px;*/
    padding-bottom: 10px;
  }

  .me-article-title {
    font-weight: 600;
  }

  .me-pull-right {
    float: right;
  }

  .me-artile-description {
    font-size: 10px;
    line-height: 10px;
    margin-bottom: 5px;
    color: #a6a6a6;
  }

</style>
